import React, { useState } from 'react';
import { weixin, toTop, qrCode } from '@/utils/util';
import styles from './index.less';

const RightTools: React.FC = () => {
  const [qrCodeDisplay, setQrCodeDisplay] = useState(false);
  return (
    <div
      className={styles.rightTools}
      onMouseOver={() => setQrCodeDisplay(true)}
      onMouseOut={() => setQrCodeDisplay(false)}
    >
      <div className={styles.service}>
        <img src={weixin} />
        <div>服务号</div>
      </div>
      <div className={styles.top} onClick={() => window.scrollTo(0, 0)}>
        <img src={toTop} />
        <div>置顶</div>
      </div>
      {qrCodeDisplay && (
        <div className={styles.qrCodeHover}>
          <img src={qrCode} />
        </div>
      )}
    </div>
  );
};

export default RightTools;
